<template>
    <el-tabs v-model="tabs">
        <el-tab-pane label="借款单" name="first">

            <form class="wrapper" id="wrapper">
                <h2 class="Title Two">固远晨通科技发展有限公司支付申请单</h2>
                <table class="report_audit" rules=all>
                    <tr>
                        <td>凭证编号</td>
                        <td colspan="3">{{ViewFinanceAndRecorDB.LoanNumber}}</td>
                    </tr>
                    <tr>
                        <td>部门</td>
                        <td>{{_GetAllDepartmentById(ViewFinanceAndRecorDB.Department)}}</td>
                        <td>申请时间</td>
                        <td>{{ViewFinanceAndRecorDB.BorrowTime}}</td>
                    </tr>
                    <tr>
                        <td>项目</td>
                        <td>{{_ProjectById(ViewFinanceAndRecorDB)}}</td>
                        <td>申请人</td>
                        <td>{{_UserById(ViewFinanceAndRecorDB.Borrower)}}</td>
                    </tr>
                    <tr>
                        <td>支付方式</td>
                        <td colspan="3">{{_TransferMethodByt(ViewFinanceAndRecorDB.TransferMethod)}}</td>
                    </tr>
                    <tr class='tr_center'>
                        <th>类别一</th>
                        <th>类别二</th>
                        <th>金额</th>
                        <th>用途</th>
                    </tr>
                    <tr v-for="v in detailedArray" style="text-align:center">
                        <td> <label>{{_GetNameById(v.CategoryOne)}}</label></td>
                        <td> <label>{{_GetNameById(v.CategoryTwo)}}</label></td>
                        <td>{{v.Money}}</td>
                        <td>{{v.Purpose}}</td>
                    </tr>
                    <tr>
                        <td>合计金额</td>
                        <td>{{ViewFinanceAndRecorDB.Money}}</td>
                        <td>大写</td>
                        <td>{{_Arabia_To_SimplifiedChinese(ViewFinanceAndRecorDB.Money)}}</td>
                    </tr>
                    <tr>
                        <td>收款对象</td>
                        <td colspan="3">{{_AllCustomerUserPayeeById(ViewFinanceAndRecorDB.Payee)}}</td>
                    </tr>
                    <tr>
                        <td>收款银行账号</td>
                        <td>{{ViewFinanceAndRecorDB.BankCardNumber}}</td>
                        <td>收款开户行</td>
                        <td>{{ViewFinanceAndRecorDB.BankName}}</td>
                    </tr>
                    <tr>
                        <td>财务核准金额</td>
                        <td>{{ViewFinanceAndRecorDB.ApprovalMoney}}</td>
                        <td>大写</td>
                        <td>{{_Arabia_To_SimplifiedChinese(ViewFinanceAndRecorDB.ApprovalMoney)}}</td>
                    </tr>
                    <tr>
                        <td>手续费</td>
                        <td colspan="3">{{ViewFinanceAndRecorDB.ServiceCharge}}</td>
                    </tr>
                    <tr>
                        <td>已有票据</td>
                        <td colspan="3">{{_booltoStr(ViewFinanceAndRecorDB.HasInvoice)}}</td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td colspan="3">{{ViewFinanceAndRecorDB.Remark}}</td>
                    </tr>
                    <tr>
                        <td>图片</td>
                        <td colspan="3">
                            <el-image v-for="v in imgArray"
                                      style="width: 100px; height: 100px; margin-left:10px"
                                      :src="v">
                            </el-image>
                        </td>
                    </tr>
                    <tbody id="auditPeople"></tbody>
                </table>
            </form>

        </el-tab-pane>
        <el-tab-pane label="报销记录" name="second">
            <el-table :data="tableData"
                      border>
                <el-table-column header-align="center" align="center" prop="ReimNumber" label="单据编号" width="150px"></el-table-column>
                <el-table-column header-align="center" align="center" prop="FinanceType" label="单据类型">
                    <template slot-scope="scope">
                        <label v-if="scope.row.FinanceType==4">常规报销</label>
                        <label v-else-if="scope.row.FinanceType==8">差旅报销</label>
                        <label v-else></label>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="Borrower" label="申请人">
                    <template slot-scope="scope">
                        <label>{{_UserById(scope.row.Borrower)}}</label>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="Money" label="金额"></el-table-column>
                <el-table-column header-align="center" align="center" prop="ApprovalMoney" label="财务核准金额" width="130px"></el-table-column>

                <el-table-column header-align="center" align="center" prop="Payee" label="收款方" width="150px" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <label>{{_GetPayeerName(scope.row)}}</label>
                    </template>
                </el-table-column>

                <el-table-column header-align="center" align="center" prop="BorrowTime" label="申请时间" width="170">
                    <template slot-scope="scope">
                        <label>{{(scope.row.BorrowTime) }}   </label>
                    </template>
                </el-table-column>

                <el-table-column header-align="center" align="center" prop="ApprovalMoney" label="状态" width="150px">
                    <template slot-scope="scope">
                        <label v-html="_GetInitStateColum(scope.row)">   </label>
                        <!--formatDateTime(scope.row..BorrowTime);-->
                    </template>
                </el-table-column>

                <el-table-column header-align="center" align="center" prop="ReimMethod" label="单据类型">
                    <template slot-scope="scope">
                        <label v-if="scope.row.ReimMethod==1">冲账</label>
                        <label v-else-if="scope.row.ReimMethod==2">垫付</label>
                        <label v-else></label>
                    </template>
                </el-table-column>

                <el-table-column header-align="center" align="center" prop="IsFinishReversal" label="冲账完毕">
                    <template slot-scope="scope">
                        <label v-if="scope.row.IsFinishReversal">是</label>
                        <label v-else>  </label>
                    </template>
                </el-table-column>


                <el-table-column header-align="center" align="center" prop="ServiceCharge" label="手续费"></el-table-column>


                <el-table-column header-align="center" align="center" prop="ApprovalMoney" label="部门" width="150px">
                    <template slot-scope="scope">
                        {{_GetAllDepartmentById(scope.row.Department)}}
                        <!--formatDateTime(scope.row..BorrowTime);-->
                    </template>
                </el-table-column>
                <el-table-column prop="ApprovalMoney" header-align="center" align="center" label="项目" width="180px" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        {{_GetProjectById(scope.row.Project)}}
                        <!--formatDateTime(scope.row..BorrowTime);-->
                    </template>
                </el-table-column>
                <el-table-column prop="Remark" header-align="center" align="center" label="备注" :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public"
    export default {
        name: "ViewFinanceAndRecord",
        props: {
            AllUsers: {
                type: Array,
                required: true
            },
            AllProject: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            ViewFinanceAndRecorDB: {
                type: Object,
                required: true
            },
            AllCustomer: {
                type: Array,
                required: true
            },
            AllCategory: {
                type: Array,
                required: true
            },
        },
        watch: {
            ViewFinanceAndRecorDB: function (val, oval) {
                this.GetReimByLoanNumber(val);
                this.detailedArray = val.FinanceDocDetails;
                console.log(this.detailedArray)
            },
        },
        created() {
            this.detailedArray = this.ViewFinanceAndRecorDB.FinanceDocDetails;
            this.GetReimByLoanNumber(this.ViewFinanceAndRecorDB);
            this.InitImg();
            console.log(this.detailedArray)
        },
        data() {
            return {
                tableData: [],
                tabs: "first",
                detailedArray: [],
                //图片数据
                imgArray: [],
            }
        },
        methods: {
            async InitImg() {
                this.imgArray = [];
                this.imgArray = await publicjs.GetAllFileByUrl(this.$http, "256," + this.dataDB.Id);
            },
            //表格通用
            _TransferMethodByt(obj) {
                if (obj == 1) {
                    return "现金支付";
                }
                else if (obj == 2) {
                    return "银行转账";
                }
            },
            _booltoStr(obj) {
                if (obj) {
                    return "是";
                } else {
                    return "否";
                }
            },

            _Arabia_To_SimplifiedChinese(obj) {
                return publicjs.Arabia_To_SimplifiedChinese(obj);
            },

            _UserById(id) {
                return publicjs.GetUserNameById(id);
            },

            _ProjectById(d) {
                for (var i = 0; i < this.AllProject.length; i++) {
                    if (this.AllProject[i].Id == d.Project) {
                        return this.AllProject[i].ProjectName;
                    }
                }
            },

            _AllCustomerUserPayeeById(d) {
                console.log(d);
                if (d.PayeeType == 1) {
                    for (var i = 0; i < this.AllCustomer.length; i++) {
                        if (this.AllCustomer[i].Id == d.Payee) {
                            return this.AllCustomer[i].CustomerCompany;
                        }
                    }
                }
                else if (d.PayeeType == 2) {
                    for (var i = 0; i < this.AllUsers.length; i++) {
                        if (this.AllUsers[i].Id == d.Payee) {
                            return this.AllUsers[i].UserName;
                        }
                    }
                }
            },

            _GetNameById(id) {
                for (var i = 0; i < this.AllCategory.length; i++) {
                    let Id = parseInt(id)
                    if (Id == this.AllCategory[i].Id) {
                        return this.AllCategory[i].CategoryName;
                    }
                }
            },


            _GetAllDepartmentById(id) {
                return publicjs.GetDepartmentNameById(id)
            },
            _GetProjectById(id) {
                return publicjs.GetProjectNameById(id)
            },
            _GetPayeerName(obj) {


                return publicjs.GetpayeerNameById(obj.PayeeType, obj.Payee)
            },
            _GetInitStateColum(obj) {
                return publicjs.InitStateColum(obj);
            },
            GetpayeerNameById(obj) {
                return publicjs.GetpayeerNameById(PayeeType, obj.id);
            },
            GetReimByLoanNumber(obj) {
                this.$http.get("/Finance/GetReimByLoanNumber?LoanNumber=" + obj.LoanNumber).then(res => {
                    this.tableData = res.data.data;
                });
            },
        },
        mounted: function () {
            publicjs.AddAuditPeople(this.ViewFinanceAndRecorDB, 3, this.ViewFinanceAndRecorDB.auditRule);
        }
    }


</script>

<style scoped>
    .time {
        text-align: right;
    }

    #printBtn {
        position: absolute;
        right: 11%;
        top: 115px;
        z-index: 9999;
    }

    #audit {
        position: absolute;
        right: 11%;
        top: 80px;
        z-index: 9999;
    }
    /*外包装样式*/
    /*   .wrapper {
           width: 80%;
           height: 100%;
           margin: auto;
       }*/
    /*页眉样式*/
    .header {
        font-weight: bold;
        font-size: 20px;
        font-family: cursive;
        width: 80%;
        margin: auto;
        border-bottom: 2px solid black;
        padding: 0px 0px;
        position: relative;
    }

        .header img {
            width: 200px;
            height: 55px;
        }

        .header label {
            position: absolute;
            bottom: 10px;
            right: 70px;
        }
    /*标题样式*/
    h2 {
        width: 80%;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*标题样式*/
    h4 {
        width: 80%;
        text-align: center;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*数据表格样式*/
    .report_data {
        width: 100%;
        text-align: center;
        border: 1px solid black;
        font-size: 14px;
        word-break: break-all;
    }

        .report_data tr {
            height: 40px;
        }

        .report_data th {
            font-weight: 100;
        }

    .baseInfo {
        height: 20px;
        line-height: 20px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

        .baseInfo .worderWrapper {
            display: inline-block;
            width: 200px;
        }

    .style {
        height: 40px;
        line-height: 40px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

    .price {
        border-top: none;
    }
    /*审核表格样式*/
    .report_audit {
        width: 100%;
        border: 1px solid black;
        font-size: 14px;
    }

        .report_audit .tdCenter {
            text-align: center;
        }

        .report_audit tr {
            height: 50px;
        }

            .report_audit tr p {
                padding: 3px;
            }

        .report_audit td {
            padding: 0 10px;
        }

            .report_audit td:first-child {
                width: 150px;
            }

        .report_audit .tr_center {
            text-align: center;
        }

    .audit {
        font: italic bold 20px/30px arial,sans-serif;
        text-align: right;
    }

        .audit span {
            display: inline-block;
            width: 100px;
            font: bold 17px/30px arial,sans-serif;
        }

    .author {
        width: 80%;
        margin: auto;
        margin-top: 5px;
        font-weight: bold;
        text-align: right;
    }
    /*页脚样式*/
    #Footer {
        width: 80%;
        margin: auto;
        border-top: 2px solid black;
        margin-top: 60px;
        font-weight: bold;
    }

        #Footer div {
            padding-top: 5px;
            padding-bottom: 10px;
        }

    #search select {
        text-align: left;
    }
    /*折叠面板样式修改*/
    .layui-collapse .layui-colla-title {
        margin: 0;
        width: 100%;
        text-align: left;
    }
    /*报表管理下统计报表的样式*/
    #EchartData .pie {
        height: 500px;
    }

    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }

    #EchartData .bar {
        width: 100%;
        height: 500px;
    }

    .report_data .tr_one {
        height: 50px;
    }

    .report_data .tr_two {
        height: 100px;
    }

    .report_data .td_Title {
        font-weight: bold;
    }

    .report_data .layui-form-radio > i:hover, .report_data .layui-form-radioed > i {
        color: #5FB878 !important;
    }
</style>



<!--<style scoped>
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        font-size: 14px;
        letter-spacing: 2px;
    }

    #printBtn {
        position: absolute;
        right: 10%;
        top: 50px;
        z-index: 9999;
    }

    #audit {
        position: absolute;
        right: 10%;
        top: 10px;
        z-index: 9999;
    }

    #export {
        position: absolute;
        right: 10%;
        top: 90px;
        z-index: 9999;
    }
    /*外包装样式*/
    .wrapper {
        width: 80%;
        height: 100%;
        margin: auto;
    }
    /*页眉样式*/
    .header {
        font-weight: bold;
        font-size: 20px;
        font-family: cursive;
        width: 80%;
        margin: auto;
        border-bottom: 2px solid black;
        padding: 10px 0px;
        position: relative;
    }

        .header img {
            width: 200px;
            height: 55px;
        }

        .header label {
            position: absolute;
            bottom: 10px;
            right: 70px;
        }
    /*标题样式*/
    h2 {
        width: 80%;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*标题样式*/
    h4 {
        width: 80%;
        text-align: center;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*数据表格样式*/
    .report_data {
        width: 100%;
        text-align: center;
        border: 1px solid black;
        font-size: 14px;
        word-break: break-all;
    }

        .report_data tr {
            height: 40px;
        }

        .report_data th {
            font-weight: 100;
        }

    .baseInfo {
        height: 20px;
        line-height: 20px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

        .baseInfo .worderWrapper {
            display: inline-block;
            width: 200px;
        }

    .style {
        height: 40px;
        line-height: 40px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

    .price {
        border-top: none;
    }
    /*审核表格样式*/
    .report_audit {
        width: 100%;
        border: 1px solid black;
        font-size: 14px;
    }

        .report_audit .tdCenter {
            text-align: center;
        }

        .report_audit tr {
            height: 70px;
        }

            .report_audit tr p {
                padding: 3px;
            }

        .report_audit td {
            padding: 0 10px;
        }

            .report_audit td:first-child {
                width: 150px;
            }

        .report_audit .tr_center {
            text-align: center;
        }

    tr p.audit {
        font: italic bold 20px/30px arial,sans-serif;
        text-align: right;
        /*padding-right: 110px;*/
    }

        tr p.audit span {
            display: inline-block;
            width: 100px;
            font: bold 17px/30px arial,sans-serif;
        }

    tr p.gray {
        color: gray;
    }

    tr p.audit span.red {
        color: red;
    }

    tr p.audit span.blue {
        color: blue;
    }

    .time {
        width: 100%;
        text-align: right;
    }

    .author {
        width: 80%;
        margin: auto;
        margin-top: 5px;
        font-weight: bold;
        text-align: right;
    }
    /*页脚样式*/
    #Footer {
        width: 80%;
        margin: auto;
        border-top: 2px solid black;
        margin-top: 60px;
        font-weight: bold;
    }

        #Footer div {
            padding-top: 5px;
            padding-bottom: 10px;
        }
    /*设置搜索框居中*/
    #search {
        text-align: center;
        padding: 0px;
    }

        #search select {
            text-align: left;
        }
    /*折叠面板样式修改*/
    .layui-collapse .layui-colla-title {
        margin: 0;
        width: 100%;
        text-align: left;
    }

    .wrapperReport {
        width: 100%;
        height: 100%;
        margin: auto;
    }
    /*报表管理下统计报表的样式*/
    #EchartData .pie {
        height: 500px;
    }

    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }

    #EchartData .bar {
        width: 100%;
        height: 500px;
    }

    .report_data .tr_one {
        height: 50px;
    }

    .report_data .tr_two {
        height: 100px;
    }

    .report_data .td_Title {
        font-weight: bold;
    }

    .td_left {
        text-align: left;
        padding-left: 20px;
    }

    .td_Content {
    }

    .report_data .layui-disabled, .report_data .layui-disabled:hover {
        color: black !important;
    }

    .report_data .layui-form-radio > i:hover, .report_data .layui-form-radioed > i {
        color: #5FB878 !important;
    }

</style>-->
